import React from "react";
import {connect} from "dva";
import {Layout, Button, Modal, Table, Tabs, List} from "antd";
import BaseComponent from "components/BaseComponent";
import {PlusOutlined} from '@ant-design/icons';
import Toolbar from "components/Toolbar";
import SearchBar from "components/SearchBar";
import DataTable from "components/DataTable";
import {ModalForm} from "components/Modal";
import Upload from "components/Upload";
import {FormColumns} from "./columns";
import config from '@/config';

const {Content, Header, Footer, Sider} = Layout;
const Pagination = DataTable.Pagination;
const {confirm} = Modal;

@connect(({permissiongroup, loading}) => ({   //链接model
    permissiongroup,
    loading: loading.models.permissiongroup,
}))
export default class extends BaseComponent {
    state = {
        record: null,
        visible: false,
        visibleDelivery: false,
        rows: [],
        showDetail: false,
    };

    handleDelete = (records) => {
        const {rows} = this.state;

        this.props.dispatch({
            type: "permissiongroup/remove",   //执行model的remove方法
            payload: {
                records,
                success: () => {
                    // 如果操作成功，在已选择的行中，排除删除的行
                    this.setState({
                        rows: rows.filter(
                            (item) => !records.some((jtem) => jtem.rowKey === item.rowKey)
                        ),
                    });
                },
            },
        });
    };

    render() {
        const {permissiongroup, loading, dispatch} = this.props;
        const {pageData, menudict} = permissiongroup;
        console.log(menudict)
        const {rows, record, visible, visibleDelivery} = this.state;
        const columns = FormColumns(this, menudict);
        const searchBarProps = {    //下拉搜索
            columns,
            onSearch: (values) => {
                dispatch({
                    type: "permissiongroup/getPageInfo",
                    payload: {
                        pageData: pageData.filter(values).jumpPage(1, 10),
                    },
                });
            },
        };
        const dataTableProps = {
            loading,
            columns,
            rowKey: "id",
            dataItems: pageData,
            selectType: "checkbox",
            showNum: true,
            isScroll: true,
            selectedRowKeys: rows.map((item) => item.rowKey),
            onChange: ({pageNum, pageSize}) => {
                dispatch({
                    type: "permissiongroup/getPageInfo",
                    payload: {
                        pageData: pageData.jumpPage(pageNum, pageSize),
                    },
                });
            },
            onSelect: (keys, rows) => this.setState({rows}),
        };

        const modalFormProps = {
            loading,
            record,
            visible,
            columns,
            modalOpts: {
                width: 800,
            },
            onCancel: () => {
                this.setState({
                    record: null,
                    visible: false,
                });
            },
            // 新增、修改都会进到这个方法中，
            // 可以使用主键或是否有record来区分状态
            onSubmit: (values) => {
                dispatch({
                    type: "permissiongroup/save",
                    payload: {
                        record,
                        values,
                        success: () => {
                            this.setState({
                                record: null,
                                visible: false,
                            });
                        },
                    },
                });
            },
        };


        return (
         <Layout className="full-layout crud-page">
                <Header>
                    <Toolbar
                        appendLeft={
                            <Button.Group>
                                <Button type="primary" icon={<PlusOutlined/>} onClick={this.onAdd}>
                                    新增
                                </Button>
                                {/*<Button*/}
                                {/*disabled={!rows.length}*/}
                                {/*onClick={e => this.onDelete(rows)}*/}
                                {/*icon="delete"*/}
                                {/*>*/}
                                {/*删除*/}
                                {/*</Button>*/}
                            </Button.Group>
                        }
                        pullDown={<SearchBar type="grid" {...searchBarProps} />}
                    >
                        <SearchBar group="abc" {...searchBarProps} />
                    </Toolbar>
                </Header>
                <Content>
                    <DataTable {...dataTableProps} />
                </Content>
                <Footer>
                    <Pagination {...dataTableProps} />
                </Footer>
                <ModalForm {...modalFormProps} />
            </Layout>
        );
    }
}
